<template>
  <body>
  <!-- 登录界面旁图片 -->
  <div class="back2">
    <div class="logpic"></div>
    <!--登录界面-->
    <div class="login">
      <form class="form" id="form1" name="myLog" @keydown.enter="to_menu">
        <table>
          <caption>编程导航</caption>
          <tr>
            <td class="logwidth">用户名：</td>
            <td><input type="text" name="text" style="height: 20px;"></td>
          </tr>
          <tr>
            <td class="logwidth">密 码：</td>
            <td><input type="password"  name="password" style="height: 20px;"></td>
          </tr>
          <tr>
            <td class="logbtnloc">
              <button class="logbtn"  type="button" @click="to_menu()">登录</button>
            </td>
          </tr>
          <span id="tips" style="color: red; font-weight: bold;"></span>
        </table>
        <br>
      </form>
    </div>
  </div>
  </body>
</template>

<script>


export default {
  name: "login",
  data() {
    return {
      activeIndex: '/login'
    };
  },
  methods: {
    //提交登录
    Log() {
      let tips = document.getElementById("tips");
      let myLog = document.getElementById("form1");
      if (!myLog.text.value)//用户名为空
      {
        tips.innerText = "请输入用户名！";
        myLog.text.focus();
        return false;
      } else if (myLog.text.value !== "admin")//用户名错误，默认用户名为admin
      {
        tips.innerText = "请输入正确的用户名！";
        myLog.text.focus(); //设置用户名一栏为焦点
        return false;
      }
      if (!myLog.password.value)//密码为空
      {
        tips.innerText = "请输入密码！";
        myLog.password.focus();//设置用户名一栏为焦点
        return false;
      } else if (myLog.password.value !== "admin")//默认密码为admin
      {
        tips.innerText = "密码错误，请重试！";
        myLog.password.focus();
        return false;
      } else {
        tips.innerText = "登陆成功";
        myLog.password.focus();
        return true;
      }
    },
    to_menu() {
      if (this.Log())
        window.open('/cover', '_self');
    }
  }
}
</script>

<style scoped>
/*设置登录界面旁图片显示位置*/
.logpic {
  width: 400px;
  height: 400px;
  animation: logpicframs 60s infinite;
  background-image: url("../../public/login/logimg1.jpeg"), url("../../public/login/logimg2.jpeg"),
  url("../../public/login/logimg3.jpeg"), url("../../public/login/logimg4.jpeg");
}

/*设置登录页面图片轮播*/
@keyframes logpicframs {
  0% {
    background: url("../../public/login/logimg1.jpeg");
    background-size: cover;
  }
  20% {
    background: url("../../public/login/logimg2.jpeg");
    background-size: cover;
  }
  40% {
    background: url("../../public/login/logimg3.jpeg");
    background-size: cover;
  }
  60% {
    background: url("../../public/login/logimg4.jpeg");
    background-size: cover;
  }
  80% {
    background: url("../../public/login/logimg1.jpeg");
    background-size: cover;
  }
  100% {
    background: url("../../public/login/logimg1.jpeg");
    background-size: cover;
  }
}

.login {
  display: block;
  background: #C3C3C3;
  width: 400px;
  height: 400px;
  text-align: center;
  border-radius: 0 0 10px 10px; /*设置圆角*/
  opacity: 0.8; /*设置透明度*/
  box-shadow: 1px 1px 5px 1px #ccc; /*设置阴影效果*/
}

/*背景图片轮转播放*/
body {
  background: url("../../public/login/loginbackground1.jpg"),
  url("../../public/login/loginbackground2.jpg"),
  url("../../public/login/loginbackground3.jpg"),
  url("../../public/login/loginbackground4.jpg");
  animation: frams 40s infinite;
  display: block;
}

.back2{
  display: flex;
  position: absolute;
  top: 20%;
  left: 25%;
}

@keyframes frams {
  0% {
    background: url("../../public/login/loginbackground1.jpg");
    background-size: cover;
  }
  25% {
    background: url("../../public/login/loginbackground2.jpg");
    background-size: cover;
  }
  50% {
    background: url("../../public/login/loginbackground3.jpg");
    background-size: cover;
  }
  75% {
    background: url("../../public/login/loginbackground4.jpg");
    background-size: cover;
  }
  100% {
    background: url("../../public/login/loginbackground1.jpg");
    background-size: cover;
  }
}

/*设置table元素位置*/
table {
  display: inline;
  text-align: center;
  position: relative;
  top: 50px;
  opacity: 1; /*设置table里的元素透明度*/
}

/*设置table间距*/
tr {
  display: block;
  margin-top: 30px;
  position: relative;
  left: 18%;
}

form {
  font-family: "楷体","微软雅黑";
}

/*设置登录页面字体*/
caption {
  font-size: 40px;
  width: 300px
}

/*设置编程导航字体大小*/
.logwidth {
  width: 100px;
}

/*固定用户名，密码所在的td宽度，使table整齐*/
.logbtnloc {
  display: block;
  text-align: center
}

/*设置登录按钮的位置*/
input {
  border-radius: 10px;
}

/*设置表单圆角*/
.logbtn {
  width: 180px;
  height: 30px;
  background: #5554F2;
  border-radius: 10px;
  color: white;
  position: relative;
  right: 14%;
}

/*设置登录按钮样式*/
span {
  position: relative;
  top: 60px;
}

/*设置提示消息显示位置*/
</style>
